<template>
	<view class="j-cart-button" @click.stop="handleAddToCart">
		<view class="cart-icon" :class="{ loading: loading }">
			<view class="icon" v-if="!loading">
				<uv-icon name="plus" color="#fff" size="24rpx"></uv-icon>
			</view>
			<view class="loading-text" v-else>
				<uv-icon name="more-dot-fill" color="#fff" size="24rpx"></uv-icon>
			</view>
		</view>
		<text class="cart-text" v-if="showText">加购物车</text>
	</view>
</template>

<script>
export default {
	name: 'JCartButton',
	props: {
		// 商品信息
		goodsItem: {
			type: Object,
			required: true
		},
		// 是否显示文字
		showText: {
			type: Boolean,
			default: false
		},
		// 按钮大小
		size: {
			type: String,
			default: 'large', // small, normal, large
			validator: (value) => ['small', 'normal', 'large'].includes(value)
		},
		// 按钮颜色
		color: {
			type: String,
			default: '#246ef9'
		},
		// 是否禁用
		disabled: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			loading: false
		};
	},
	computed: {
		buttonSize() {
			const sizes = {
				small: '32rpx',
				normal: '40rpx',
				large: '48rpx'
			};
			return sizes[this.size];
		},
		iconSize() {
			const sizes = {
				small: '20rpx',
				normal: '24rpx',
				large: '28rpx'
			};
			return sizes[this.size];
		}
	},
	methods: {
		async handleAddToCart() {
			if (this.disabled || this.loading) return;

			this.loading = true;

			try {
				// 模拟添加购物车操作
				await this.addToCart();

				// 触发成功事件
				this.$emit('success', this.goodsItem);

				// 显示成功提示
				this.showSuccessToast();
			} catch (error) {
				// 触发错误事件
				this.$emit('error', error);
				console.error('添加购物车失败:', error);
			} finally {
				this.loading = false;
			}
		},

		async addToCart() {
			// 模拟异步操作
			return new Promise((resolve, reject) => {
				setTimeout(() => {
					// 这里可以调用实际的API
					console.log('添加商品到购物车:', this.goodsItem);
					resolve();
				}, 800);
			});
		},

		showSuccessToast() {
			// 这里可以显示成功提示
			console.log('商品已添加到购物车');
			// 可以集成toast组件显示提示
		}
	}
};
</script>

<style lang="less" scoped>
.j-cart-button {
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.3s ease;

	&:active {
		transform: scale(0.95);
	}

	.cart-icon {
		width: v-bind(buttonSize);
		height: v-bind(buttonSize);
		background: v-bind(color);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.3s ease;

		&.loading {
			background: #ccc;
		}

		.icon {
			color: #fff;
			font-size: v-bind(iconSize);
			font-weight: bold;
			line-height: 1;
		}

		.loading-text {
			color: #fff;
			font-size: v-bind(iconSize);
			font-weight: bold;
			line-height: 1;
			animation: loading 1s infinite;
		}
	}

	.cart-text {
		margin-left: 8rpx;
		font-size: 20rpx;
		color: v-bind(color);
		font-weight: 500;
	}
}

@keyframes loading {
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0.5;
	}
}

// 禁用状态
.j-cart-button[data-disabled='true'] {
	opacity: 0.5;
	cursor: not-allowed;

	&:active {
		transform: none;
	}
}
</style>












